<template>
    <div>
        <div class="fillcontain" v-if="alarmIsShow">

            <div class="bus_b">

                <h2 class="title">告警管理</h2>
                <el-tabs v-model="activeName" @tab-click="tabClick">
                    <el-tab-pane label="告警事件" name="alarmEvent">
                    </el-tab-pane>
                    <el-tab-pane label="告警规则" name="alarmRule">
                    </el-tab-pane>
                </el-tabs>

            </div>
            <component :is="curComp"></component>
        
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import AlarmEvent from './alarmEvent.vue'
import AlarmRule from './alarmRule.vue'
export default {
  data() {
    return {
        activeName: 'alarmEvent',
        curComp: 'AlarmEvent',
        alarmIsShow: false
    };
  },
  components: {AlarmEvent, AlarmRule},
  mounted() {
      if(this.$route.path == '/electricBoxManage/alarmManage') {
          this.alarmIsShow = true
      }
  },
  watch:{
    $route(to,from){
        if(to.path == '/electricBoxManage/alarmManage') {
            this.alarmIsShow = true
        } else if(to.path == '/electricBoxManage/alarmManage/alarmRule'){
            this.alarmIsShow = false
        }
    }
  },
  methods: {
      tabClick(tab, event) {
         tab.name == 'alarmEvent' ? this.curComp = 'AlarmEvent' : this.curComp = 'AlarmRule'
      }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/table.less";
</style>

